{%- liquid
  case section.settings.text_alignment
    when 'left'
      assign text_alignment = 'text-md-start'
      assign content_alignment = 'text-start'
    when 'center'
      assign text_alignment = 'text-md-center'
      assign content_alignment = 'text-center'
    when 'right'
      assign text_alignment = 'text-md-end'
      assign content_alignment = 'text-end'
  endcase

       assign mark = 'h2'
    if section.settings.enable_adjust_h_tag
      assign mark = section.settings.adjust_h_tag_to
    endif

-%}
{%- assign section_identifier = '#shopify-section-' | append: section.id -%}
{%- assign  padding_top = section.settings.padding_top | append:'px' -%}
{%- assign  padding_bottom = section.settings.padding_bottom | append:'px' -%}

{%- assign padding_mobile_top = section.settings.padding_top_mob | append: 'px' -%}
{%- assign padding_mobile_bottom = section.settings.padding_bottom_mob | append: 'px' -%}


{%- style -%}
 {{ section_identifier }} {
    padding-top: {{padding_top}};
    padding-bottom: {{padding_bottom}};
  }

 @media only screen and (max-width: 430px) {
    {{ section_identifier }} {
      padding-top: {{ padding_mobile_top }};
      padding-bottom: {{ padding_mobile_bottom }};
    }
  }
  {{ section_identifier }}.kiks-custom-slideshow .highlighter {
    color: {{ section.settings.highlighter_color }};
  }
{%- endstyle -%}
{%- if section.settings.heading != blank or section.settings.content != blank -%}
    <div class="container">
      <div class="{{ text_alignment }} {{ content_alignment }}">
           {%- if section.settings.heading != blank -%}
            <{{ mark }} class="mb-0 section-title">{{ section.settings.heading }}</{{ mark }}>
          {%- endif -%}
        {%- if section.settings.content != blank -%}
          <div class="no-last-margin {{ richtext_link_style }}">
             {{- section.settings.content -}}
          </div>
        {%- endif -%}
      </div>
    </div>
{%- endif -%}
<kiks-custom-slider class="swiper mySwiper">
    <div class="swiper-wrapper">
      {% for block in section.blocks %}
        <div class="swiper-slide">
           {%- if block.settings.image != blank -%}
             {{ block.settings.image | image_url: width: block.settings.image.width | image_tag: loading: 'lazy', sizes: 'min(100vw, 560px)', widths: '200,300,400,500,600,800,1000,1200,1400,1600', class: 'image-background' }}
           {%- elsif block.settings.video_url != blank -%}
             <div class="video-content has-iframe block w-full h-full">
               {% if block.settings.poster_image != blank %}
                 {{ block.settings.poster_image | image_url: width: block.settings.poster_image.width | image_tag: 
                    loading: 'lazy', 
                    class: 'poster-image'
                 }}
               {% endif %}
               {% assign video_url = block.settings.video_url | append: "?autoplay=1&mute=1&enablejsapi=1&controls=1&rel=0" %}
               <iframe src="{{ video_url }}" 
                      data-src="{{ video_url }}" 
                      class="url-video" 
                      title="{{ block.settings.description | escape }}" 
                      frameborder="0"
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                      allowfullscreen>
               </iframe>
             </div>
           {%- elsif block.settings.video_shopify != blank -%}
             <div class="video-content has-video block w-full h-full" 
                  data-video-id="{{ section.id }}" 
                  data-autoplay="true" 
                  data-background="false" 
                  data-description="{{ block.settings.video_description | escape }}">
               {% if block.settings.poster_image != blank %}
                 {{ block.settings.poster_image | image_url: width: block.settings.poster_image.width | image_tag: 
                    loading: 'lazy', 
                    class: 'poster-image'
                 }}
               {% endif %}              
               {% assign video_class = 'video-player' %}
               {{ block.settings.video_shopify | video_tag: 
                  class: video_class,
                  controls: true, 
                  autoplay: true, 
                  loop: true, 
                  muted: true, 
                  playsinline: true 
               }}
             </div>
           {%- endif -%}
        </div>
      {% endfor %}
      </div>
    {% if section.settings.enable_dots %}
      <div class="swiper-pagination"></div>
    {% endif %}
  </kiks-custom-slider>
{%- if section.settings.caption_content != blank -%}
    <div class="container caption">
        <div class="{{ text_alignment }} {{ content_alignment }}">
           {%- if section.settings.caption_content != blank -%}
            <div class="caption-content {{ richtext_link_style }}">
             <h5>{{ section.settings.caption_content }}</h5>
            </div>
          {%- endif -%}
    </div>
{%- endif -%}

  {% schema %}
    {
      "name": "Kiks Custom Slider",
      "tag": "section",
      "class": "kiks-custom-slideshow",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Custom Slider"
        },
        {
          "type": "richtext",
          "id": "content",
          "label": "Content",
          "default": "<p>Organize content into multiple columns to share useful information to your customers about your products, values...</p>"
        },
        {
          "type": "text",
          "id": "highlighter",
          "label": "High lighter",
          "default": "Custom Slider"
        },
        {
          "type": "textarea",
          "id": "caption_content",
          "label": "Caption Content",
          "info": "This content will be displayed below the slider. To Use the highlighter (<span class='highlighter'>high light me</span>)",
          "default": "<p>Organize content into multiple columns to share useful information to your customers about your products, values...</p>"
        },
        {
          "type": "header",
          "content": "All Settings"
        },
        {
          "type": "checkbox",
          "id": "enable_adjust_h_tag",
          "label": "Enable adjust H tag",
          "default": false
        },
        {
          "type": "select",
          "id": "adjust_h_tag_to",
          "label": "Adjust the H tag to",
          "options": [
            {
              "value": "h1",
              "label": "H1"
            },
            {
              "value": "h2",
              "label": "H2"
            },
            {
              "value": "h3",
              "label": "H3"
            },
            {
              "value": "h4",
              "label": "H4"
            },
            {
              "value": "h5",
              "label": "H5"
            },
            {
              "value": "h6",
              "label": "H6"
            }
          ],
          "default":   "h3"
        },
        {
          "type": "select",
          "id": "text_alignment",
          "label": "Text alignment",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center"
        },
        {
         "type": "color",
          "id": "highlighter_color",
          "label": "Highlighter color",
          "default": "#f0c040"
        },
        {
          "type": "checkbox",
          "id": "enable_dots",
          "label": "Enable dots",
          "default": false
        },
        {
          "type": "header",
          "content": "Kikstart Spacing Settings"
        },
        {
            "type": "range",
            "id": "padding_top",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "label": "Padding top",
            "default": 64
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "label": "Padding Bottom",
            "default": 64
          },
          {
            "type": "range",
            "id": "padding_top_mob",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "label": "For Mobile Padding top",
            "default": 48
          },
          {
            "type": "range",
            "id": "padding_bottom_mob",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "label": "For Mobile Padding Bottom",
            "default": 48
          }
      ],
      "blocks": [
        {
          "type": "item",
          "name": "Item",
          "settings": [
            {
              "type": "image_picker",
              "id": "image",
              "label": "Image"
            },
            {
              "type": "image_picker",
              "id": "poster_image",
              "label": "Cover image",
              "info": "Required. Shows while the video is loading, or if it cannot autoplay."
            },
            {
              "type": "video",
              "id": "video_shopify",
              "label": "Video upload",
              "info": "Hosted by Shopify. Replaces External video if both are set."
            },
            {
              "type": "text",
              "id": "video_url",
              "label": "External video",
              "info": "Supports [YouTube](https://youtubeembedcode.com/en/) and [Vimeo](https://help.vimeo.com/hc/en-us/articles/12426486963857-Autoplay-and-loop-embedded-videos).",
              "default": "https://www.youtube.com/embed/_9VUPq3SxOc"
            }
          ]
        }
      ],
      "presets": [
        {
          "name": "Kiks Custom Slider",
          "category": "Carousel",
          "blocks": [
            {
              "type": "item"
            }, {
              "type": "item"
            }, {
              "type": "item"
            }
          ]
        }
      ]
    }
  {% endschema %}